<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
	</head>
		<script src="js/serverUrl.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/mint.js"></script>
		<script src="js/moment.js"></script>
		<style type="text/css">
			.introduceContainer{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				place-items: center;
				padding-top: 8px;
			}
			.introduceItem{
				font-size: 3vw;
				display: flex;
				align-items: center;
			}
			.introduce{
				width: 3vw;
				height: 3vw;
				margin-right:2vw;
			}
			.itemContainer{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
				place-items: center;
			}
			.item{
				display: flex;
				flex-direction: column;
				width: 16vw;
				height: 16vw;
				border-radius: 5px;
				margin-top: 10px;
				color: white;
				align-items: center;
				justify-content: center;
			}
		</style>
	<body style="background-color: white;">
		<div id="app">
			<div  class="introduceContainer">
				<div class="introduceItem"><div class="introduce" style="background-color: #259b24;"></div>正确</div>
				<div class="introduceItem"><div class="introduce" style="background-color: #E51C23;"></div>错误</div>
				<div class="introduceItem"><div class="introduce" style="background-color: #9E9E9E;"></div>未答</div>
			</div>
			<div  class="itemContainer">
				<div v-for="(item,index) in questionList"
					 :style="{'background':item.color}"
					class="item"
                    @click.stop="toDetail(index)">
					<div style="font-size: 4vw;">{{index+1}}</div>
					<div style="font-size: 3.5vw;margin-top: 1.5vw;">{{item.userAnswer}}</div>
				</div>
			</div>
			
		
		</div>
	</body>
	
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data:{
			  questionList:[
			  ]
		  },
		  created() {
			  window.getQuestionList = this.getQuestionList
		  },
		  methods:{
			  getQuestionList (questionList){
				let size = questionList.length  
				for(let i =0;i<size;i++){
					let item = questionList[i]
					if(item.userAnswer == item.solution) {
						item.color = "#259b24"
					}else{
						item.color = "#E51C23"
					}
					if(item.userAnswer ==null || item.userAnswer == "") {
						item.color = "#9E9E9E"
						item.userAnswer = "未答"
					}
				}
				
				this.questionList = questionList
			  },
              toDetail(index){
                  let params = {
                      index:index
                  }
                  WebViewJavascriptBridge.callHandler('toDetail',params,function(response) {
                                        
                    });
              }
		  }
		})		
		</script>
</html>
